<template>
    <div>
        <div class="switch-language">
        </div>
        <div @contextmenu.stop="" id="bubble" class="bubble">
            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
        </div>
        <div class="login">
            <div class="login-box">
                <div class="head">
                    <img src="~assets/login-header.png" alt=""/>
                </div>
                <div class="form">
                    <img class="profile-avatar" src="~assets/avatar.png" alt=""/>
                    <div class="content">
                        <el-form @keyup.enter="onSubmitPre()" ref="formRef" size="large" :model="form" :rules="rules">
                            <el-form-item prop="username">
                                <el-input
                                    ref="usernameRef"
                                    type="text"
                                    clearable
                                    v-model="form.username"
                                    placeholder="请输入账号"
                                >
                                    <template #prefix>
                                        <Icon name="fa fa-user" class="form-item-icon" size="16"
                                              color="var(--el-input-icon-color)"/>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    ref="passwordRef"
                                    v-model="form.password"
                                    type="password"
                                    placeholder="请输入密码"
                                    show-password
                                >
                                    <template #prefix>
                                        <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16"
                                              color="var(--el-input-icon-color)"/>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-checkbox v-model="form.keep" label="保持会话" size="default"></el-checkbox>
                            <el-form-item>
                                <el-button
                                    :loading="state.submitLoading"
                                    class="submit-button"
                                    round
                                    type="primary"
                                    size="large"
                                    @click="onSubmitPre()"
                                >
                                    登陆
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {nextTick, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import * as pageBubble from '/@/utils/pageBubble'
import type {FormInstance, InputInstance} from 'element-plus'
import {ElNotification, FormRules} from 'element-plus'
import {useConfig} from '/@/stores/config'
import {useAdminInfo} from '/@/stores/adminInfo'
import {login} from '/@/api/loginAuth'
import {uuid} from '/@/utils/random'
import router from '/@/router'
import {AdminInfo} from "/@/stores/interface";

let timer: number

const config = useConfig()
const adminInfo = useAdminInfo()

const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const state = reactive({
    showCaptcha: false,
    submitLoading: false,
})
const form = reactive({
    username: '',
    password: '',
    keep: false,
    captchaId: uuid(),
    captchaInfo: '',
})

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
})

const focusInput = () => {
    if (form.username === '') {
        usernameRef.value!.focus()
    } else if (form.password === '') {
        passwordRef.value!.focus()
    }
}

onMounted(() => {
    timer = window.setTimeout(() => {
        pageBubble.init()
    }, 1000)

    // login('get')
    //     .then((res) => {
    //         state.showCaptcha = res.data.captcha
    //         nextTick(() => focusInput())
    //     })
    //     .catch((err) => {
    //         console.log(err)
    //     })
})

onBeforeUnmount(() => {
    clearTimeout(timer)
    pageBubble.removeListeners()
})

const onSubmitPre = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            if (state.showCaptcha) {
                onSubmit()
            } else {
                onSubmit()
            }
        }
    })
}

const onSubmit = (captchaInfo = '') => {
    state.submitLoading = true
    form.captchaInfo = captchaInfo

    const userInfo = {
        "id": 1,
        "username": "admin",
        "nickname": "Admin",
        "avatar": "http:\\/\\/localhost:8000\\/static\\/images\\/avatar.png",
        "last_login_time": "2023-07-09 19:51:03",
        "token": "024b916f-6a44-4f20-b9d1-3f09506f84ff",
        "refresh_token": ""

    }
    login(form).then((res: any) => {
        sessionStorage.setItem("accessToken",res.accessToken);
        adminInfo.dataFill(<AdminInfo>userInfo)
        ElNotification({
            message: '登陆成功',
            type: 'success',
        })
        state.submitLoading = false
        router.push({path: "/"})
    }).catch((error: any) => {
        console.log('请求异常：', error)
    })
}
</script>

<style scoped lang="scss">
.switch-language {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
}

.bubble {
    overflow: hidden;
    background: url(/@/assets/bg.jpg) repeat;
}

.form-item-icon {
    height: auto;
}

.login {
    position: absolute;
    top: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;

    .login-box {
        overflow: hidden;
        width: 430px;
        padding: 0;
        background: var(--ba-bg-color-overlay);
        margin-bottom: 80px;
    }

    .head {
        background: #ccccff;

        img {
            display: block;
            width: 430px;
            margin: 0 auto;
            user-select: none;
        }
    }

    .form {
        position: relative;

        .profile-avatar {
            display: block;
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 4px solid var(--ba-bg-color-overlay);
            top: -50px;
            right: calc(50% - 50px);
            z-index: 2;
            user-select: none;
        }

        .content {
            padding: 100px 40px 40px 40px;
        }

        .submit-button {
            width: 100%;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 15px;
            --el-button-bg-color: var(--el-color-primary);
        }
    }
}

@media screen and (max-width: 720px) {
    .login {
        display: flex;
        align-items: center;
        justify-content: center;

        .login-box {
            width: 340px;
            margin-top: 0;
        }
    }
}

.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}

.content :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}

// 暗黑样式
@at-root .dark {
    .bubble {
        background: url(/@/assets/bg-dark.jpg) repeat;
    }

    .login {
        .login-box {
            background: #161b22;
        }

        .head {
            img {
                filter: brightness(61%);
            }
        }

        .form {
            .submit-button {
                --el-button-bg-color: var(--el-color-primary-light-5);
                --el-button-border-color: rgba(240, 252, 241, 0.1);
            }
        }
    }
}

@media screen and (max-height: 800px) {
    .login .login-box {
        margin-bottom: 0;
    }
}
</style>
